<template>
  <h1>简单K线图</h1>
  <hr />
  <p class="xlfx" style="text-align: center; font-size: 25px">销量分析K线图</p>
  <div id="main" style="width: 100%; height: 80%"></div>
  <!-- <div ref="main" style="width: 100%; height: 80%"></div> -->
</template>

<script setup lang="ts">
// 导入echats
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import service from "../../../utils/service";

// const main = ref();

onMounted(() => {
  getDataList()
});

// 获取图表数据
const getDataList = () => {
  service({
    url: "/admin/data/kData",
  }).then((res: any) => {
    if (res.data.code === "200") {
        arrx.push(...res.data.data.x)
        arry.push(...res.data.data.val)
    }
  }).then(()=>{
    initEcgarts() //数据更新后调用initeCharts()
  })
};
// getDataList();

const arrx:any=[]
const arry:any=[]
console.log("arrx",arrx)
console.log("arry",arry)

const initEcgarts = () => {
  // const myChart = echarts.init(main.value);
  const myChart = echarts.init(document.getElementById('main') as HTMLElement);
  let option = {
    toolbox: {
      feature: {
        saveAsImage:{}
      }
    },
    xAxis: {
      type: "category",
      data: arrx,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: arry,
        type: "candlestick",
      },
    ],
  };
  option &&  myChart.setOption(option);
};
</script>

<style>
</style>